<template>
  <div v-if="show">
    <el-form label-position="top" class="widget-config">
      <template v-if="['button', 'button-dropdown'].indexOf(data.type)>=0">
        <el-form-item label="按钮名称">
          <el-input v-model="data.label" type="text"></el-input>
        </el-form-item>
        <el-form-item label="图标">
          <el-input v-model="data.options.icon" type="text" style="width:68.5%"></el-input>

          <el-popover ref="icon-popover" placement="bottom" title="选择图标" width="1230" trigger="click" popper-class="select-icon">
            <el-button slot="reference" style="width:30%" @click.native="selectIcon">选择</el-button>
            <el-scrollbar :noresize="false" :native="false" wrap-class="scrollbar-wrap">
              <keep-alive>
                <select-icon @onSelectIcon="(icon)=>{onSelectIcon(icon)}"></select-icon>
              </keep-alive>
            </el-scrollbar>
            <el-footer style="padding-top:10px;border-top:1px solid #f3f3f3;text-align:right;">
              <el-button type="primary" @click="()=>{$refs['icon-popover'].doClose();}">关闭</el-button>
            </el-footer>
          </el-popover>
        </el-form-item>
        <el-form-item label="权限点名称">
          <el-input v-model="data.options.authNode" type="text"></el-input>
        </el-form-item>

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="按钮类型">
              <el-select v-model="data.options.type">
                <el-option value="default">default</el-option>
                <el-option value="primary">primary</el-option>
                <el-option value="success">success</el-option>
                <el-option value="warning">warning</el-option>
                <el-option value="danger">danger</el-option>
                <el-option value="info">info</el-option>
                <el-option value="text">text</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="朴素">
              <el-switch v-model="data.options.plain">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="data.options.authNode && data.options.authNode.toLowerCase().indexOf('import')>=0" :gutter="10">
          <el-col :span="12">
            <el-form-item label="关联导入模板ID">
              <el-input v-model.number="data.options.importInfo_Id" controls-position="right"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="data.options.authNode && data.options.authNode.indexOf('export')>=0" :gutter="10">
          <el-col :span="12">
            <el-form-item label="关联导出模板ID">
              <el-input v-model.number="data.options.exportInfo_Id" controls-position="right"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="data.type==='button-dropdown'" :gutter="10">
          <el-col :span="24">
            <el-form-item label="下拉框项">
              <draggable :list="data.options.options" :options="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}" tag="ul">
                <li v-for="(item, index) in data.options.options" :key="index">
                  <el-input v-model="item.label" style="width:90px;" size="mini" placeholder="按钮名称"></el-input>
                  <el-input v-model="item.authNode" style="width:90px;" size="mini" placeholder="动作名称"></el-input>
                  <i class="drag-item el-icon-yrt-yidong1" style="font-size: 16px;margin: 0 5px;cursor: move;"></i>
                  <el-button circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;" @click="handleOptionsRemove(index)"></el-button>
                  <el-popover title="设置JSON参数">
                    <el-input v-model="item.params" style="width:180px;" size="mini" placeholder="JSON参数"></el-input>
                    <el-button slot="reference" circle plain type="danger" size="mini" style="padding: 4px;margin-left: 5px;">参数</el-button>
                  </el-popover>
                </li>
              </draggable>
              <div style="margin-left: 22px;">
                <el-button type="text" @click="data.options.options.push({label: null, authNode: null})">添加选项</el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="key">
          <el-input v-model="data.key" type="text"></el-input>
        </el-form-item>
      </template>
      <template v-if="['button-group'].indexOf(data.type)>=0">
        <el-form-item label="按钮分组名称">
          <el-input v-model="data.label" type="text"></el-input>
        </el-form-item>
        <el-form-item label="包含按钮数">
          {{ data.buttons.length }} 个
        </el-form-item>
      </template>

      <template v-if="data.type == 'grid'">
        <el-row v-if="dataOptions.isPDA" :gutter="3">
          <el-col :span="12">
            <el-form-item label="详情主表数据">
              <el-switch v-model="data.isMain">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="栅格间隔">
          <el-input v-model.number="data.options.gutter" type="number"></el-input>
        </el-form-item>
        <el-form-item label="tab分组名">
          <el-input v-model="data.tabGroupName"></el-input>
        </el-form-item>
        <el-form-item label="列配置项">
          <draggable :list="data.columns" :options="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}" tag="ul">
            <li v-for="(item, index) in data.columns" :key="index">
              <i class="drag-item el-icon-yrt-yidong1" style="font-size: 16px;margin: 0 5px;cursor: move;"></i>
              <el-input v-model.number="item.span" placeholder="栅格值" size="mini" style="width: 100px;" type="number"></el-input>
              <el-button circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;" @click="handleOptionsRemove(index)"></el-button>
            </li>
          </draggable>
          <div style="margin-left: 22px;">
            <el-button type="text" @click="handleAddColumn">添加列</el-button>
          </div>
        </el-form-item>
        <el-form-item label="水平排列方式">
          <el-select v-model="data.options.justify">
            <el-option value="start" label="左对齐"></el-option>
            <el-option value="end" label="右对齐"></el-option>
            <el-option value="center" label="居中"></el-option>
            <el-option value="space-around" label="两侧间隔相等"></el-option>
            <el-option value="space-between" label="两端对齐"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="垂直排列方式">
          <el-select v-model="data.options.align">
            <el-option value="top" label="顶部对齐"></el-option>
            <el-option value="middle" label="居中"></el-option>
            <el-option value="bottom" label="底部对齐"></el-option>
          </el-select>
        </el-form-item>
      </template>
      <template v-if="data.type == 'detail-grid'">
        <el-row :gutter="3">
          <el-col :span="12">
            <el-form-item label="标题名称">
              <el-input v-model="data.options.title"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="文件夹名">
              <el-input v-model="data.folder"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="3">
          <el-col :span="12">
            <el-form-item label="关联子表名" required>
              <el-input v-model="data.subTableView"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="子表主键字段名" required>
              <el-input v-model="data.options.idField"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="3">
          <el-col :span="6">
            <el-form-item label="分页大小">
              <el-input v-model.number="data.options.pageSize"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="子表排序方式">
              <el-input v-model="orderBy"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="3">
          <el-col :span="12">
            <el-form-item label="外键ID">
              <el-input v-model.number="data.options.foreignField"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="隐藏明细">
              <el-switch v-model="data.options.isHidden">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="固定条件">
          <el-input v-model="currentFixedWhere" :rows="3" type="textarea"></el-input>
        </el-form-item>

        <el-row :gutter="3">
          <el-col :span="12">
            <el-form-item label="是否带有纵向边框">
              <el-switch v-model="data.options.border">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示求和行">
              <el-switch v-model="data.options.showSumField" active-text="是" inactive-text="否">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="3">
          <el-col :span="12">
            <el-form-item label="隐藏复选列">
              <el-switch v-model="data.options.hiddenCheckCol" active-text="是" inactive-text="否">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="复选列滚动">
              <el-switch v-model="data.options.checkColScroll" active-text="是" inactive-text="否">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="3">
          <el-col :span="12">
            <el-form-item label="隐藏索引列">
              <el-switch v-model="data.options.hiddenIndexCol" active-text="是" inactive-text="否">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="索引列滚动">
              <el-switch v-model="data.options.indexColScroll" active-text="是" inactive-text="否">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="3">
          <el-col :span="12">
            <el-form-item label="显示展开行">
              <el-switch v-model="data.options.showExpandRow" active-text="是" inactive-text="否">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="展开列固定">
              <el-switch v-model="data.options.expandColFixed" active-text="是" inactive-text="否">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="3">
          <el-col :span="12">
            <el-form-item label="表格尺寸">
              <el-select v-model="data.options.size">
                <el-option value="medium">medium</el-option>
                <el-option value="small">small</el-option>
                <el-option value="mini">mini</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="表格最大高度">
              <el-input v-model.number="data.options['max-height']">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="分页大小">
          <el-input v-model.number="data.options.pageSize">
          </el-input>
        </el-form-item>
        <el-form-item label="默认打开页面索引(默认为1)">
          <el-input v-model.number="data.options.pageIndex">
          </el-input>
        </el-form-item>
      </template>
      <template v-if="data.type == 'inline-group'">
        <el-form-item label="标题">
          <el-input v-model="data.label"></el-input>
        </el-form-item>
        <el-form-item label="tab分组名">
          <el-input v-model="data.tabGroupName"></el-input>
        </el-form-item>
      </template>
      <template v-if="data.type == 'splitter-group'">
        <el-form-item label="标题">
          <el-input v-model="data.label"></el-input>
        </el-form-item>
        <el-form-item label="tab分组名">
          <el-input v-model="data.tabGroupName"></el-input>
        </el-form-item>
      </template>
      <template v-if="isFieldType(data.type)">
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item v-if="isFieldType(data.type)" label="标题">
              <el-input v-model="data.label"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="绑定字段">
              <el-input v-model="data.options.prop"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="isFieldType(data.type)" :gutter="3">
          <el-col :span="12">
            <el-form-item label="输入框类型">
              <el-select v-model="data.type" placeholder="请选择" @change="($event)=>{dataTypeChange($event, data);}">
                <el-option v-for="(item, index) in basicComponents" :key="index" :label="item.label" :value="item.type">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据类型">
              <el-select v-model="data.options.dataType" placeholder="请选择">
                <el-option v-for="(item, index) in dataTypeList" :key="index" :label="item" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="isFieldType(data.type)" :gutter="3">
          <el-col :span="12">
            <el-form-item label="是否只读">
              <el-switch v-model="data.options.readonly" :active-value="true" :inactive-value="false"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="isFieldType(data.type) && data.options" label="显示标题">
              <el-switch v-model="data.options.noLabel" :active-value="false" :inactive-value="true"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>

        <template v-if="data.type==='table-select'">
          <el-row>
            <el-col :span="24">
              <el-form-item label="接口地址">
                <el-input v-model="data.options.url"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="查询字段">
                <el-input v-model="data.options.searchFields" :rows="2" type="textarea"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="表格字段定义">
                <el-row v-for="(item, index) in data.options.columns" :key="index">
                  <el-col :span="11">
                    <el-input v-model="item.prop" placeholder="字段英文名" class="col-param"></el-input>
                  </el-col>
                  <el-col :span="8">
                    <el-input v-model="item.label" placeholder="字段中文名" class="col-param"></el-input>
                  </el-col>
                  <el-col :span="5">
                    <el-input v-model.number="item.width" placeholder="宽度" class="col-param"></el-input>
                  </el-col>
                </el-row>
                <el-button type="text" @click="(e)=>{data.options.columns.push({})}">添加字段</el-button>
                <el-button type="text" @click="(e)=>{data.options.columns.pop()}">删除字段</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="默认值">
            <el-input v-model="data.options.defaultValue"></el-input>
          </el-form-item>
        </template>

        <template v-if="data.type==='input-select'">
          <el-row>
            <el-col :span="24">
              <el-form-item label="接口地址">
                <el-input v-model="data.options.url"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="查询字段">
                <el-input v-model="data.options.searchFields" :rows="2" type="textarea"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="value字段">
                <el-input v-model="data.options.valueField"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="label字段">
                <el-input v-model="data.options.labelField"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </template>

        <el-row v-if="Object.keys(data.options).indexOf('width')>=0" :gutter="3">
          <el-col :span="12">
            <el-form-item label="输入框宽度">
              <el-input v-model="data.options.width"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="占位内容">
              <el-input v-model="data.options.placeholder"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="!dataOptions.isPDA && Object.keys(data.options).indexOf('styles')>=0" :gutter="3">
          <el-col :span="12">
            <el-form-item label="字体大小">
              <el-input-number v-model.number="data.options.styles.fontSize" :min="0" :step="1" controls-position="right" class="w-110"></el-input-number> px
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="行高">
              <el-input-number v-model.number="data.options.styles.lineHeight" :min="0" :step="1" controls-position="right" class="w-110"></el-input-number> px
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="!dataOptions.isPDA" :gutter="3">
          <el-col :span="12">
            <el-form-item label="标题宽度">
              <el-input-number v-model.number="data.options['label-width']" :min="0" :step="1" controls-position="right" class="w-120"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="无外边距">
              <el-switch v-model="data.options.noMargin"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item v-if="Object.keys(data.options).indexOf('size')>=0" label="大小">
          宽度：
          <el-input v-model.number="data.options.size.width" style="width: 80px;" type="number"></el-input>
          高度：
          <el-input v-model.number="data.options.size.height" style="width: 80px;" type="number"></el-input>
        </el-form-item>

        <el-form-item v-if="Object.keys(data.options).indexOf('inline')>=0" label="布局方式">
          <el-radio-group v-model="data.options.inline">
            <el-radio-button :label="false">块级</el-radio-button>
            <el-radio-button :label="true">行内</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="Object.keys(data.options).indexOf('showInput')>=0" label="显示输入框">
          <el-switch v-model="data.options.showInput"></el-switch>
        </el-form-item>

        <el-row v-if="data.type=='upload-image'" :gutter="3">
          <el-col :span="24">
            <el-form-item label="服务器地址">
              <el-input v-model="data.options.serverAction"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="data.type=='upload-image'" :gutter="3">
          <el-col :span="12">
            <el-form-item label="是否多图">
              <el-switch v-model="data.options.multiple"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上次最大数">
              <el-input-number v-model="data.options.max" :min="0" :max="10" :step="1" controls-position="right" class="w-120"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="data.type=='upload-image'" :gutter="3">
          <el-col :span="12">
            <el-form-item label="文件列表类型">
              <el-select v-model="data.options.listType" placeholder="请选择">
                <el-option label="picture-card" value="picture-card"></el-option>
                <el-option label="picture" value="picture"></el-option>
                <el-option label="text" value="text"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="隐藏标准列表">
              <el-switch v-model="data.options.hiddenFileList"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="['select','tree'].indexOf(data.type)>=0" :gutter="3">
          <el-col :span="12">
            <el-form-item label="是否多选">
              <el-switch v-model="data.options.multiple" @change="handleSelectMuliple"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下拉框主键字段">
              <el-input v-model="data.options.keyProp"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="['cascader'].indexOf(data.type)>=0" :gutter="3">
          <el-col :span="12">
            <el-form-item label="选择任意节点">
              <el-switch v-model="data.options.checkStrictly"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="多级名称字段">
              <el-input v-model="data.options.nameProp"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item v-if="Object.keys(data.options).indexOf('allowHalf')>=0" label="允许半选">
          <el-switch v-model="data.options.allowHalf">
          </el-switch>
        </el-form-item>
        <el-form-item v-if="Object.keys(data.options).indexOf('showAlpha')>=0" label="支持透明度选择">
          <el-switch v-model="data.options.showAlpha">
          </el-switch>
        </el-form-item>

        <el-row :gutter="3">
          <el-col :span="12">
            <el-form-item v-if="Object.keys(data.options).indexOf('showLabel')>=0" label="是否显示标签">
              <el-switch v-model="data.options.showLabel">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="data.type=='tree'" label="仅选择叶节点">
              <el-switch v-model="data.options.onlySelectLeaf">
              </el-switch>
            </el-form-item>
            <el-form-item v-if="data.type=='select'" label="可搜索">
              <el-switch v-model="data.options.filterable">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="3">
          <el-col :span="12">
            <el-form-item v-if="data.type=='select'" label="允许用户创建新条目">
              <el-switch v-model="data.options.allowCreate">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="data.type=='select'" label="可清空">
              <el-switch v-model="data.options.clearable">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item v-if="Object.keys(data.options).indexOf('options')>=0" label="选项">
          <el-radio-group v-model="data.options.remote" size="mini" style="margin-bottom:10px;">
            <el-radio-button :label="'bindDropdown'">下拉框ID</el-radio-button>
            <el-radio-button :label="false">静态数据</el-radio-button>
            <el-radio-button :label="true">远端数据</el-radio-button>
          </el-radio-group>
          <template v-if="data.options.remote===true">
            <div>
              <el-input v-model="data.options.remoteFunc" size="mini" style="">
                <template slot="prepend">远端方法</template>
              </el-input>
              <el-input v-model="data.options.props.value" size="mini" style="">
                <template slot="prepend">值</template>
              </el-input>
              <el-input v-model="data.options.props.label" size="mini" style="">
                <template slot="prepend">标签</template>
              </el-input>
            </div>
          </template>
          <template v-else-if="data.options.remote==='bindDropdown'">
            <el-input v-model.number="data.options.dropdown_Id" type="number" size="mini">
              <template slot="prepend">关联下拉框ID</template>
            </el-input>
          </template>
          <template v-else>
            <template v-if="data.type=='radio' || (data.type=='select'&&!data.options.multiple)">
              <el-radio-group v-model="data.options.defaultValue">
                <draggable :list="data.options.options" :options="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}" tag="ul">
                  <li v-for="(item, index) in data.options.options" :key="index">
                    <el-radio :label="item.value" style="margin-right: 5px;">
                      <el-input v-model="item.value" style="width:90px;" size="mini"></el-input>
                      <el-input v-model="item.label" style="width:90px;" size="mini"></el-input>
                      <!-- <input v-model="item.value"/> -->
                    </el-radio>
                    <i class="drag-item el-icon-yrt-yidong1" style="font-size: 16px;margin: 0 5px;cursor: move;"></i>
                    <el-button circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;" @click="handleOptionsRemove(index)"></el-button>
                  </li>
                </draggable>
              </el-radio-group>
            </template>

            <template v-if="data.type=='checkbox' || (data.type=='select' && data.options.multiple)">
              <el-checkbox-group v-model="data.options.defaultValue">

                <draggable :list="data.options.options" :options="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}" tag="ul">
                  <li v-for="(item, index) in data.options.options" :key="index">
                    <el-checkbox :label="item.value" style="margin-right: 5px;">
                      <el-input v-model="item.value" :style="{'width': data.options.showLabel? '90px': '190px' }" size="mini"></el-input>
                      <el-input v-if="data.options.showLabel" v-model="item.label" style="width:100px;" size="mini"></el-input>
                    </el-checkbox>
                    <i class="drag-item el-icon-yrt-yidong1" style="font-size: 16px;margin: 0 5px;cursor: move;"></i>
                    <el-button circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;" @click="handleOptionsRemove(index)"></el-button>

                  </li>
                </draggable>
              </el-checkbox-group>
            </template>
            <div style="margin-left: 22px;">
              <el-button type="text" @click="handleAddOption">添加选项</el-button>
            </div>
          </template>

        </el-form-item>

        <el-form-item v-if="Object.keys(data.options).indexOf('defaultValue')>=0 && (['textarea', 'input', 'rate', 'color', 'switch', 'radio', 'tree', 'date', 'select'].indexOf(data.type)>=0)" label="默认值">
          <el-input v-if="data.type=='textarea'" v-model="data.options.defaultValue" :rows="5" type="textarea"></el-input>
          <template v-if="['input', 'radio', 'switch', 'tree', 'date', 'select'].indexOf(data.type)>=0">
            <el-input v-if="['byte', 'int32', 'int64', 'float'].indexOf(data.options.dataType)>=0" v-model.number="data.options.defaultValue"></el-input>
            <el-input v-else v-model="data.options.defaultValue"></el-input>
          </template>
          <el-rate v-if="data.type == 'rate'" v-model="data.options.defaultValue" :max="data.options.max" :allow-half="data.options.allowHalf" style="display:inline-block;vertical-align: middle;"></el-rate>
          <el-button v-if="data.type == 'rate'" type="text" style="display:inline-block;vertical-align: middle;margin-left: 10px;" @click="data.options.defaultValue=0">清空</el-button>
          <el-color-picker v-if="data.type == 'color'" v-model="data.options.defaultValue" :show-alpha="data.options.showAlpha"></el-color-picker>
        </el-form-item>
        <template v-if="['date','datetime'].indexOf(data.options.dataType)>=0">
          <el-row :gutter="3">
            <el-col :span="8">
              <el-form-item v-if="data.type == 'date'" label="显示类型">
                <el-select v-model="data.options.type">
                  <el-option value="year"></el-option>
                  <el-option value="month"></el-option>
                  <el-option value="date"></el-option>
                  <el-option value="dates"></el-option>
                  <!-- <el-option value="week"></el-option> -->
                  <el-option value="datetime"></el-option>
                  <el-option value="datetimerange"></el-option>
                  <el-option value="daterange"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="格式">
                <el-select v-model="data.options.formatter">
                  <el-option label="[清空]" value=""></el-option>
                  <el-option label="YYYY-MM" value="YYYY-MM"></el-option>
                  <el-option label="YYYY-MM-DD" value="YYYY-MM-DD"></el-option>
                  <el-option label="YYYY-MM-DD HH:mm:ss" value="YYYY-MM-DD HH:mm:ss"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="data.type === 'time'" :gutter="10">
            <el-col :span="12">
              <el-form-item label="范围选择">
                <el-switch v-model="data.options.isRange">
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="固定时间选择模式">
                <el-switch v-model="data.options.fixedTimeSelect">
                </el-switch>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item v-if="data.type == 'date'" label="是否获取时间戳">
            <el-switch v-model="data.options.timestamp">
            </el-switch>
          </el-form-item>
          <el-form-item v-if="data.options.isRange || data.options.type=='datetimerange' || data.options.type=='daterange'" label="结束时间占位内容">
            <el-input v-model="data.options.endPlaceholder"></el-input>
          </el-form-item>
          <el-row v-if="data.type === 'time'" :gutter="10">
            <el-col :span="8">
              <el-form-item label="开始时间">
                <el-input v-model="data.options.start"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="结束时间">
                <el-input v-model="data.options.end"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="步长">
                <el-input v-model="data.options.step"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item v-if="data.type=='time' && Object.keys(data.options).indexOf('isRange')>=0" label="默认值">
            <el-time-picker v-if="!data.options.isRange" key="1" v-model="data.options.defaultValue" :arrow-control="data.options.arrowControl" :value-format="data.options.format" style="width: 100%;">
            </el-time-picker>
            <el-time-picker v-if="data.options.isRange" key="2" v-model="data.options.defaultValue" :arrow-control="data.options.arrowControl" :value-format="data.options.format" is-range style="width: 100%;">
            </el-time-picker>
          </el-form-item>
        </template>

        <template v-if="data.type=='imgupload'">
          <el-form-item label="最大上传数">
            <el-input v-model.number="data.options.length" type="number"></el-input>
          </el-form-item>
          <el-form-item :required="true" label="Domain">
            <el-input v-model="data.options.domain"></el-input>
          </el-form-item>
          <el-form-item :required="true" label="获取七牛Token方法">
            <el-input v-model="data.options.tokenFunc"></el-input>
          </el-form-item>
        </template>

        <template v-if="data.type=='blank'">
          <el-form-item label="绑定数据类型">
            <el-select v-model="data.options.defaultType">
              <el-option value="String" label="字符"></el-option>
              <el-option value="Object" label="对象"></el-option>
              <el-option value="Array" label="数组"></el-option>
            </el-select>
          </el-form-item>
        </template>

        <el-form-item v-if="['tree', 'cascader'].indexOf(data.type)>=0" label="ajax请求参数">
          <el-input v-model="currentAjaxParams" :rows="3" type="textarea"></el-input>
        </el-form-item>

        <el-row v-if="['byte', 'int32', 'float', 'decimal'].indexOf(data.options.dataType)>=0" :gutter="3">
          <el-col :span="12">
            <el-form-item label="格式化">
              <el-select v-model="data.options.formatter">
                <el-option label="[清空]" value=""></el-option>
                <el-option label="YYYY-MM" value="YYYY-MM"></el-option>
                <el-option label="YYYY-MM-DD" value="YYYY-MM-DD"></el-option>
                <el-option label="YYYY-MM-DD HH:mm:ss" value="YYYY-MM-DD HH:mm:ss"></el-option>
                <el-option label="￥#.00" value="￥#.00"></el-option>
                <el-option label="#" value="#"></el-option>
                <el-option label="#.#" value="#.#"></el-option>
                <el-option label="#.##" value="#.##"></el-option>
                <el-option label="#.###" value="#.###"></el-option>
                <el-option label="#.####" value="#.####"></el-option>
                <el-option label="#.0" value="#.0"></el-option>
                <el-option label="#.00" value="#.00"></el-option>
                <el-option label="#.000" value="#.000"></el-option>
                <el-option label="#.0000" value="#.0000"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="16">
            <el-form-item label="数据绑定Key">
              <el-input v-model="data.key"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="扩展字段">
              <el-switch v-model="data.options.isExpandField">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item v-if="!dataOptions.isPDA" label="操作属性">
          <el-checkbox v-if="Object.keys(data.options).indexOf('readonly')>=0" v-model="data.options.readonly">完全只读</el-checkbox>
          <el-checkbox v-if="Object.keys(data.options).indexOf('disabled')>=0" v-model="data.options.disabled">禁用 </el-checkbox>
          <el-checkbox v-if="Object.keys(data.options).indexOf('editable')>=0" v-model="data.options.editable">文本框可输入</el-checkbox>
          <el-checkbox v-if="Object.keys(data.options).indexOf('clearable')>=0" v-model="data.options.clearable">显示清除按钮</el-checkbox>
          <el-checkbox v-if="Object.keys(data.options).indexOf('arrowControl')>=0" v-model="data.options.arrowControl">使用箭头进行时间选择</el-checkbox>
        </el-form-item>
        <el-form-item label="校验">
          <el-checkbox v-model="data.options.required">必填</el-checkbox>
          <el-checkbox v-model="data.options.hidden">隐藏</el-checkbox>
          <el-select v-model="data.options.ruleType" size="mini">
            <el-option value="string" label="字符串"></el-option>
            <el-option value="number" label="数字"></el-option>
            <el-option value="boolean" label="布尔值"></el-option>
            <el-option value="integer" label="整数"></el-option>
            <el-option value="float" label="浮点数"></el-option>
            <el-option value="url" label="URL地址"></el-option>
            <el-option value="email" label="邮箱地址"></el-option>
            <el-option value="hex" label="十六进制"></el-option>
          </el-select>

          <div v-if="Object.keys(data.options).indexOf('pattern')>=0">
            <el-input v-model.lazy="data.options.pattern" size="mini" style=" width: 240px;" placeholder="填写正则表达式"></el-input>
          </div>
        </el-form-item>
        <template v-if="data.type=='switch'">

          <el-row :gutter="3">
            <el-col :span="12">
              <el-form-item label="打开时的文字描述">
                <el-input v-model="data.options['active-text']"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="关闭时的文字描述">
                <el-input v-model="data.options['inactive-text']"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <!--设置值-->
          <template v-if="['byte', 'int32', 'float'].indexOf(data.options.dataType)>=0">
            <el-row :gutter="3">
              <el-col :span="12">
                <el-form-item label="打开时的值number">
                  <el-input v-model.number="data.options['active-value']"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="关闭时的值number">
                  <el-input v-model.number="data.options['inactive-value']"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
          <template v-else>
            <el-row :gutter="3">
              <el-col :span="12">
                <el-form-item label="打开时的值">
                  <el-input v-model="data.options['active-value']"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="关闭时的值">
                  <el-input v-model="data.options['inactive-value']"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
        </template>
      </template>
      <!--PDA样式-->
      <template v-if="['grid'].indexOf(data.type) < 0 && dataOptions.isPDA">
        <!--是否显示-->
        <el-row :gutter="3">
          <el-col :span="12">
            <el-form-item label="是否显示">
              <el-switch v-model="data.visible">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <!--绑定标题样式-->
        <el-row :gutter="3">
          <el-col :span="12">
            <el-form-item label="标题宽度(px)">
              <el-input v-model="data.labelOptions.styles.width" type="text"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标题对齐">
              <el-select v-model="data.labelOptions.styles['text-align']">
                <el-option value="left">left</el-option>
                <el-option value="center">center</el-option>
                <el-option value="right">right</el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="3">
          <el-col :span="12">
            <el-form-item label="标题行高(px)">
              <el-input v-model="data.labelOptions.styles['line-height']" type="text"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标题字体大小">
              <el-input v-model="data.labelOptions.styles['font-size']" type="text"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="3">
          <el-col :span="12">
            <el-form-item label="标题后面显示冒号">
              <el-switch v-model="data.labelOptions.showColon"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标题粗体">
              <el-select v-model="data.labelOptions.styles['font-weight']" placeholder="请选择">
                <el-option :value="'normal'" label="normal"></el-option>
                <el-option :value="'bold'" label="bold" />
                <el-option :value="'bolder'" label="bolder"></el-option>
                <el-option :value="'lighter'" label="lighter"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="3">
          <el-col :span="12">
            <el-form-item label="标题字体颜色">
              <el-color-picker v-model="data.labelOptions.styles['color']" show-alpha :predefine="predefineColors"></el-color-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标题背景颜色">
              <el-color-picker v-model="data.labelOptions.styles['background-color']" show-alpha :predefine="predefineColors"></el-color-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="3">
          <el-col :span="12">
            <el-form-item label="标题内边距">
              <el-input v-model="data.labelOptions.styles['padding']" type="text"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标题外边距">
              <el-input v-model="data.labelOptions.styles['margin']" type="text"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="3">
          <el-col :span="12">
            <el-form-item label="行最大宽度">
              <el-input v-model="data.labelOptions.styles['max-width']" type="text"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!--绑定字段样式-->
        <el-row :gutter="3">
          <el-col :span="12">
            <el-form-item label="字段宽度(px)">
              <el-input v-model="data.textOptions.styles.width" type="text"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="字段对齐">
              <el-select v-model="data.textOptions.styles['text-align']">
                <el-option value="left">left</el-option>
                <el-option value="center">center</el-option>
                <el-option value="right">right</el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="3">
          <el-col :span="12">
            <el-form-item label="字段行高(px)">
              <el-input v-model="data.textOptions.styles['line-height']" type="text"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="字段字体大小">
              <el-input v-model="data.textOptions.styles['font-size']" type="text"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="3">
          <el-col :span="12">
            <el-form-item label="换行模式">
              <el-select v-model="data.textOptions.styles['white-space']">
                <el-option value="">[无]</el-option>
                <el-option value="normal">normal空白会被浏览器忽略</el-option>
                <el-option value="pre">pre空白会被浏览器保留</el-option>
                <el-option value="nowrap">nowrap文本不会换行，文本会在在同一行上继续</el-option>
                <el-option value="pre-wrap">pre-wrap保留空白符序列，但是正常地进行换行</el-option>
                <el-option value="pre-line">pre-line合并空白符序列，但是保留换行符</el-option>
                <el-option value="inherit">inherit从父元素继承</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标题粗体">
              <el-select v-model="data.labelOptions.styles['font-weight']" placeholder="请选择">
                <el-option :value="'normal'" label="normal"></el-option>
                <el-option :value="'bold'" label="bold" />
                <el-option :value="'bolder'" label="bolder"></el-option>
                <el-option :value="'lighter'" label="lighter"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="3">
          <el-col :span="12">
            <el-form-item label="字段字体颜色">
              <el-color-picker v-model="data.textOptions.styles['color']" show-alpha :predefine="predefineColors"></el-color-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="字段背景颜色">
              <el-color-picker v-model="data.textOptions.styles['background-color']" show-alpha :predefine="predefineColors"></el-color-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="3">
          <el-col :span="12">
            <el-form-item label="字段内边距">
              <el-input v-model="data.textOptions.styles['padding']" type="text"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="字段外边距">
              <el-input v-model="data.textOptions.styles['margin']" type="text"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="3">
          <el-col :span="12">
            <el-form-item label="行最大宽度">
              <el-input v-model="data.textOptions.styles['max-width']" type="text"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
    </el-form>
  </div>
</template>

<script>
import Draggable from "vuedraggable";
import SelectIcon from "./select-icon.vue";

export default {
  components: {
    Draggable,
    SelectIcon
  },
  props: {
    dataOptions: {
      type: Object,
      default: () => {
        return {};
      }
    },
    data: {
      type: Object,
      default: () => {
        return {};
      }
    },
    basicComponents: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      // 验证规则
      validator: {
        type: null,
        required: null,
        pattern: null,
        range: null,
        length: null
      },
      // 非字段类型
      noFieldType: ["grid", "detail-grid", "inline-group", "splitter-group", "button", "button-group"],
      // 数据类型
      dataTypeList: ["string", "byte", "int32", "int64", "bool", "float", "decimal", "date", "datetime", "time"],
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "rgba(255, 69, 0, 0.68)",
        "rgb(255, 120, 0)",
        "hsv(51, 100, 98)",
        "hsva(120, 40, 94, 0.5)",
        "hsl(181, 100%, 37%)",
        "hsla(209, 100%, 56%, 0.73)",
        "#c7158577"
      ]
    };
  },
  computed: {
    show () {
      if (this.data && Object.keys(this.data).length > 0) {
        return true;
      }
      return false;
    },
    // tree Ajax加载属性
    currentAjaxParams: {
      get: function () {
        var params = this.data.ajaxParams;
        if (params) {
          return JSON.stringify(params, 0, 2);
        } else {
          return "";
        }
      },
      set: function (val) {
        try {
          this.$set(this.data, "ajaxParams", JSON.parse(val));
          this.$message.success("json格式正确");
        } catch (error) {
          this.$message.error("数据结构不正确，不是有效的json格式，" + error.message);
        }
      }
    },
    // 排序方式
    orderBy: {
      get: function () {
        return JSON.stringify(this.data.options.orderBy);
      },
      set: function (val) {
        try {
          const orderBy = JSON.parse(val);
          this.$set(this.data.options, "orderBy", orderBy);
          this.$message.success("列表排序方式格式正确");
        } catch (error) {
          this.$message.error("列表排序方式不是有效的JSON格式");
        }
      }
    },
    // fixedWhere JSON加载属性
    currentFixedWhere: {
      get: function () {
        var params = this.data.options.fixedWhere;
        if (params) {
          return JSON.stringify(params, 0, 2);
        } else {
          return "";
        }
      },
      set: function (val) {
        try {
          this.$set(this.data.options, "fixedWhere", JSON.parse(val));
          this.$message.success("json格式正确");
        } catch (error) {
          this.$message.error("数据结构不正确，不是有效的json格式，" + error.message);
        }
      }
    }
  },
  watch: {
    "data.options.isRange": function (val) {
      if (typeof val !== "undefined") {
        if (val) {
          this.data.options.defaultValue = null;
        } else {
          if (Object.keys(this.data.options).indexOf("defaultValue") >= 0) {
            this.data.options.defaultValue = "";
          }
        }
      }
    },
    "data.options.required": function (val) {
      if (val) {
        this.validator.required = {
          required: true,
          message: `${this.data.label}必须填写`
        };
      } else {
        this.validator.required = null;
      }

      this.$nextTick(() => {
        this.generateRule();
      });
    },
    "data.options.ruleType": function (val) {
      if (!this.show) {
        return false;
      }

      if (val && val !== "string") {
        this.validator.type = {
          type: val,
          message: this.data.label + "格式不正确"
        };
      } else {
        this.validator.type = null;
      }

      this.generateRule();
    },
    "data.options.pattern": function (val) {
      if (!this.show) {
        return false;
      }

      var evil = function (fn) {
        // 一个变量指向Function，防止有些前端编译工具报错
        var Fn = Function;
        return new Fn("return " + fn)();
      };
      if (val) {
        this.validator.pattern = {
          pattern: evil(val),
          message: this.data.label + "格式不匹配"
        };
      } else {
        this.validator.pattern = null;
      }

      this.generateRule();
    }
  },
  methods: {
    // 判断是字段类型
    isFieldType (type) {
      return this.noFieldType.indexOf(type) < 0;
    },
    handleOptionsRemove (index) {
      if (this.data.type === "grid") {
        this.data.columns.splice(index, 1);
      } else {
        this.data.options.options.splice(index, 1);
      }
    },
    handleAddOption () {
      if (this.data.options.showLabel) {
        this.data.options.options.push({
          value: "新选项",
          label: "新选项"
        });
      } else {
        this.data.options.options.push({
          value: "新选项"
        });
      }
    },
    handleAddColumn () {
      this.data.columns.push({
        span: "",
        fields: []
      });
    },
    generateRule () {
      this.data.rules = [];
      Object.keys(this.validator).forEach(key => {
        if (this.validator[key]) {
          this.data.rules.push(this.validator[key]);
        }
      });
      if (!this.data.rules.length) {
        delete this.data.rules;
      }
    },
    handleSelectMuliple (value) {
      if (value) {
        if (this.data.options.defaultValue) {
          this.data.options.defaultValue = [this.data.options.defaultValue];
        } else {
          this.data.options.defaultValue = [];
        }
      } else {
        if (this.data.options.defaultValue.length > 0) {
          this.data.options.defaultValue = this.data.options.defaultValue[0];
        } else {
          this.data.options.defaultValue = "";
        }
      }
    },
    // 编辑框类型改变
    dataTypeChange (selectVal, data) {
      const item = this.basicComponents.find(item => {
        return item.type === selectVal;
      });
      let customJson = {};
      // 表格下拉框时设置默认参数
      if (item.type === "table-select") {
        // 仓库默认值
        if (data.options.prop === "storageName") {
          customJson = {
            columns: [
              {
                prop: "storageCode",
                label: "仓库编号",
                width: 100
              },
              {
                prop: "storageName",
                label: "仓库名称",
                width: 150
              }
            ],
            url: "/api/basicInfo/base/storage/getList",
            searchFields: "storage_Id,storageCode,storageName"
          };
        } else if (data.options.prop === "consignorName") {
          // 货主默认值
          customJson = {
            columns: [
              {
                prop: "consignorCode",
                label: "货主编号",
                width: 100
              },
              {
                prop: "consignorName",
                label: "货主名称",
                width: 150
              }
            ],
            url: "/api/basicInfo/base/consignor/getList",
            searchFields: "consignor_Id,consignorCode,consignorName"
          };
        } else if (data.options.prop === "productName") {
          // 商品默认值
          customJson = {
            columns: [
              {
                prop: "productCode",
                label: "商品编号",
                width: 100
              },
              {
                prop: "productName",
                label: "商品名称",
                width: 150
              }
            ],
            url: "/api/basicInfo/base/productInfo/getList",
            searchFields: "product_Id,productCode,productModel,productName,productSpec"
          };
        } else if (data.options.prop === "providerShortName") {
          // 商品默认值
          customJson = {
            columns: [
              {
                prop: "providerCode",
                label: "供应商编号",
                width: 100
              },
              {
                prop: "providerName",
                label: "供应商名称",
                width: 150
              }
            ],
            url: "/api/basicInfo/base/provider/getList",
            searchFields: "provider_Id,providerCode,providerShortName,providerName"
          };
        }
      }
      const options = Object.assign(
        {},
        item.options,
        {
          prop: data.options.prop
        },
        customJson
      );
      data.options = JSON.parse(JSON.stringify(options));
      if (["date", "datetime", "time"].indexOf(item.type) >= 0) {
        data.options.dataType = item.type;
      } else {
        data.options.dataType = "string";
      }
    },
    // 选择图标
    selectIcon () {},
    onSelectIcon (icon) {
      this.data.options.icon = icon;
      this.$message.success("选择成功！");
      this.findRef("icon-popover").doClose();
    }
  }
};
</script>

<style lang="scss" scoped>
.widget-config {
  .col-param {
    ::v-deep .el-input__inner {
      padding: 0 5px;
    }
  }
  ::v-deep .el-input__inner {
    padding: 0 5px;
  }
  ::v-deep .el-input-number .el-input__inner {
    padding-left: 5px;
    padding-right: 40px;
  }
  ::v-deep .el-form-item {
    margin-bottom: 0px;
  }
}
</style>
